<template>
	<view style="padding: 20rpx;">
		<view style="margin-bottom: 20rpx;background-color: #FFFFFF;border-radius: 20rpx;padding: 20rpx;">
			<view style="font-size: 36rpx;font-weight: 900;">我管理的的社团</view>
			<view v-if="adminUserClubList.length!=0" style="display: flex;flex-wrap: wrap;padding: 20rpx;">
				<view v-for="(item,index) in adminUserClubList" :key="index" @click="showIndex=index" :class="{showItem:index==showIndex}"
					style="width: 200rpx;height: 250rpx;display: flex;justify-content: center;align-items: center;transition: all .25s linear;border-radius: 20rpx;">
					<view style="width: 188rpx;margin: auto;height: 230rpx;padding: 15rpx 0;position: relative;">
						<u-image style="margin: auto;" shape="circle" ref="uImage" :width="120" :height="120" :src="item.clubLogo"
							mode="aspectFill">
							<u-loading size="44" mode="flower" slot="loading" v-if="false"></u-loading>
							<view v-if="false" slot="error" style="font-size: 24rpx;">加载失败</view>
						</u-image>
						<view style="position: absolute;right: 0;top: 0;background-color: #007AFF;border-radius: 20rpx;color: #FFFFFF;padding: 10rpx 15rpx;">会长</view>
						<view v-show="showIndex!=index"
							style="margin-top: 10rpx;text-align: center;font-size: 30rpx;font-weight: 700;">
							<view>{{item.clubName}}</view>
						</view>
						<view v-show="showIndex==index" style="margin-top: 25rpx;text-align: center;">
							<u-button @click="toSeeSeeManageClubInfo(index)" data-name="3333" :loading="false" :plain="false"
								shape="circle" size="mini" :ripple="true" type="success">查看详情</u-button>
						</view>
					</view>
				</view>
			</view>
			<view v-else style="text-align: center;margin-top: 20rpx;">
				---您没有管理的社团---
			</view>
			<view style="display: flex;justify-content: center;align-items: center;margin-top: 20rpx;">
				<u-button style="font-size: 30rpx;" @click="toRegisterClub()" data-name="3333" shape="circle" size="mini" :ripple="true" type="success">申请社团</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		computed: mapState(['isLogin', 'loginUserInfo']),
		data() {
			return {
				showIndex: -1,
				adminUserClubList:[]
			}
		},
		onShow(){
			this.loadMyAdminUserClubList()
		},
		methods: {
			toSeeSeeManageClubInfo(index) {
				console.log(index)
				var nowClub = this.adminUserClubList[index];
				console.log(nowClub)
				//得到社团id data[...]
				//跳转页面
				this.$u.toast('按钮被点击')
				uni.navigateTo({
					url: '/pages/mine/my-club-manage/my-club-manage-info/my-club-manage-info?nowUserClub=' + encodeURIComponent(JSON.stringify(nowClub))
				});
			},
			loadMyAdminUserClubList(){
				var that = this
				console.log(that.url.userclub.getOneUserAdminUserClubs+"/"+that.loginUserInfo.id)
				uni.request({
					url: that.url.userclub.getOneUserAdminUserClubs+"/"+that.loginUserInfo.id,
					method: 'GET',
					header: {},
					success: (res) => {
						console.log(res)
						that.adminUserClubList = res.data.adminUserClubList
						console.log(that.adminUserClubList)
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			toRegisterClub(){
				uni.navigateTo({
				    url: '/pages/mine/my-club-manage/register-club/register-club'
				});
			},
		}
	}
</script>

<style>
	.info {
		margin-top: 10rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 700;
	}

	.showItem {
		transform: translateY(-5px);
		box-shadow: 3rpx 3rpx 20rpx #19be6b;
	}
</style>
